<template>
  <view class="familyCircleDetails flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack
                  :title="page.options.is_flag == 1 && page.options.is_genealogy !=  1 ? '家庭圈': page.options.is_genealogy ==  1 ?'家谱圈': '家庭圈'"
                  is-fixed
                  background="#f5f5f5"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="familyCircleDetails_headerTitle">
          <text class="familyCircleDetails_headerTitle_text">
            {{ page.options.is_flag != 1 ? family.details.name : page.options.name }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>
    <view class="familyCircleDetails_content mt_25">
      <textarea v-model="family.content" class="familyCircleDetails_content_textarea"
                :placeholder="page.options.is_flag == 1 ? `请输入${page.options.name}的家庭趣事生活感悟～` : `家庭趣事生活感悟～`"
                auto-height :maxlength="500"></textarea>
    </view>
    <view class="familyCircleDetails_tips flex align-center justify-between mt_9">
      <view class="familyCircleDetails_tips_left ml_20">
        <text class="familyCircleDetails_tips_left_text">
          最多可输入500字
        </text>
      </view>
      <view class="familyCircleDetails_tips_right mr_20">
        <text class="familyCircleDetails_tips_right_text">
          {{ `${family.content.length}/500` }}
        </text>
      </view>
    </view>
    <view class="familyCircleDetails_imageList mt_30">
      <view class="familyCircleDetails_imageList_content">
        <view class="familyCircleDetails_imageList_content_list flex flex-column align-center justify-center"
              v-for="(item,index) in family.imageList" :key="index" @click="previewImage(item)">
          <view class="del z_1" @click.stop="deleteImage(index)">
            <image :src="`${IMG_URL}/index/delete_release.png`" style="width: 41rpx;height: 41rpx;"></image>
          </view>
          <image :src="item" class="familyCircleDetails_imageList_content_list_imageList" mode="aspectFill"></image>
        </view>
        <view class="familyCircleDetails_imageList_content_list flex flex-column align-center justify-center"
              v-if="family.imageList.length < 9" @click="uploadPhoto">
          <image :src="`${IMG_URL}/index/image_release.png`"
                 class="familyCircleDetails_imageList_content_list_image"></image>
          <text class="familyCircleDetails_imageList_content_list_text mt_15">添加照片</text>
        </view>
      </view>
    </view>
    <!--    <view v-if="page.options.is_flag == 1 && page.options.is_genealogy != 1"-->
    <!--          class="familyCircleDetails_synchronous flex align-center justify-between mt_30">-->
    <!--      <view class="familyCircleDetails_synchronous_left ml_27">-->
    <!--        <text class="familyCircleDetails_synchronous_left_text bg">-->
    <!--          同步到{{ page.options.is_genealogy == 1 ? '家谱圈列表' : '家庭圈列表' }}-->
    <!--        </text>-->
    <!--      </view>-->
    <!--      <su-switch v-model="family.type"-->
    <!--                 size="40"-->
    <!--                 style="margin-right: 27rpx;"-->
    <!--                 :bg="'bg_FF4206'"-->
    <!--      ></su-switch>-->
    <!--    </view>-->
    <view class="familyCircleDetails_confirm flex align-center justify-center mt_62"
          @tap.stop="publishFamilyCircles()">
      <text class="familyCircleDetails_confirm_text">{{
          page.options.is_flag == 1 && page.options.is_genealogy != 1 ? '发布家庭圈' : page.options.is_genealogy == 1 ? '发布家谱圈' : '发布家庭圈'
        }}
      </text>
    </view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { computed, onMounted, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { baseUrl } from '@/sheep/config';
  import suSwitch from '@/sheep/ui/su-switch/su-switch.vue';
  import debounce from '@/sheep/helper/debounce';

  const page = reactive({
    options: {},
    headerHeight: 0,
  });
  const family = reactive({
    details: {},
    content: '',
    imageList: [],
    type: true,
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  onLoad((options) => {
    page.options = options;
  });

  onMounted(() => {
    // 获取家庭详情
    getFamilyDetail();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取家庭详情
  async function getFamilyDetail() {
    const { data } = await sheep.$api.family.getFamilyCulture({
      family_id: page.options.family_id,
    });
    family.details = data;
  }

  // 上传照片
  function uploadPhoto() {
    if (family.imageList.length >= 9) {
      uni.showToast({
        title: '最多只能上传9张图片',
        icon: 'none',
      });
      return;
    }
    uni.chooseImage({
      count: 9 - family.imageList.length,
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success: async (res) => {
        uni.showLoading({
          title: '上传图片中，请稍后',
        });
        let imageList = [];
        let allLength = res.tempFilePaths.length;
        res.tempFilePaths.forEach((item, index1) => {
          // #ifdef H5
          sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
            family.imageList.push(info.fullurl);
            uni.hideLoading();
          });
          // #endif
          // #ifndef H5
          uni.compressImage({
            src: item,
            success: (info) => {
              uni.uploadFile({
                url: `${baseUrl}/api/common/uploadFile`,
                filePath: info.tempFilePath,
                fileType: 'image',
                name: 'pics',
                formData: {
                  'file': 'pics',
                },
                header: {
                  // #ifdef MP
                  'Content-Type': 'multipart/form-data',
                  // #endif
                  ['token']: uni.getStorageSync('token'),
                  'file': info.tempFilePath,
                },
                success: async (info) => {
                  let image = JSON.parse(info.data);
                  family.imageList.push(image.data.fullurl);
                  uni.hideLoading();
                },
              });
            },
          });
          // #endif
        });
      },
      fail: (res) => {
        sheep.$helper.toast('图片大小超过限制，请重新上传');
      },
    });
  }

  function blobToFile(blob) {
    return new File([blob], blob.split(':')[1], { type: 'image/png' });
  }

  function switchChange() {
    family.type = !family.type;
  }

  function publishFamilyCircles() {
    if (!family.content) {
      sheep.$helper.toast('请填写家庭趣事生活感悟~');
      return;
    }
    debounce(async () => {
      const { code } = await sheep.$api.family.publishFamilyCircle({
        content: family.content,
        family_id: page.options.family_id,
        images: family.imageList,
        is_sync_family: family.type ? 1 : 2,
        member_id: page.options.member_id,
      });
      if (code == 1) {
        sheep.$helper.toast('发布成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }, 1500, true);
  }

  // 删除图片
  function deleteImage(index) {
    family.imageList.splice(index, 1);
  }

  // 预览图片
  function previewImage(index) {
    uni.previewImage({
      current: index, // 当前显示图片的http链接
      urls: family.imageList, // 需要预览的图片http链接列表
    });
  }

</script>


<style scoped lang="scss">
  .familyCircleDetails {
    width: 750rpx;
    margin: auto;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .familyCircleDetails_headerTitle {
      position: absolute;
      bottom: -26rpx;
      left: 50%;
      transform: translateX(-50%);

      .familyCircleDetails_headerTitle_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #A0A0A0;
      }
    }

    .familyCircleDetails_content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .familyCircleDetails_content_textarea {
        margin: 22rpx 20rpx;
        width: 662rpx;
        min-height: 448rpx;
      }
    }

    .familyCircleDetails_tips {
      width: 702rpx;

      .familyCircleDetails_tips_left {
        .familyCircleDetails_tips_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #A0A0A0;
        }
      }

      .familyCircleDetails_tips_right {
        .familyCircleDetails_tips_right_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #A0A0A0;
        }
      }
    }

    .familyCircleDetails_imageList {
      width: 702rpx;

      .familyCircleDetails_imageList_content {
        width: 596rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 10rpx;
        grid-row-gap: 10rpx;

        .familyCircleDetails_imageList_content_list {
          width: 192rpx;
          height: 192rpx;
          background: #FFFFFF;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          overflow: hidden;
          position: relative;

          .del {
            position: absolute;
            right: 0;
            top: 0;
          }

          .familyCircleDetails_imageList_content_list_imageList {
            max-width: 192rpx;
            max-height: 192rpx;
          }

          .familyCircleDetails_imageList_content_list_image {
            width: 66rpx;
            height: 66rpx;
          }

          .familyCircleDetails_imageList_content_list_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #A0A0A0;
          }
        }
      }
    }

    .familyCircleDetails_synchronous {
      width: 702rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 15rpx 15rpx 15rpx 15rpx;

      .familyCircleDetails_synchronous_left {
        .familyCircleDetails_synchronous_left_text {
          font-family: Heiti SC, Heiti SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #4B4B4B;
        }
      }

      .familyCircleDetails_synchronous_right {
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx 13rpx 13rpx 13rpx;
        border: 6rpx solid #FF4206;
      }

      .familyCircleDetails_synchronous_rightConfirm {
        width: 30rpx;
        height: 30rpx;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        border: 2rpx solid #2F2F2F;
      }
    }

    .familyCircleDetails_confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;

      .familyCircleDetails_confirm_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
